<template>
  <div class="fill_account_info_page">
    <van-form>
      <van-field
        v-model="form.accountName"
        label="账户名称"
        placeholder="请输入账户名称"
      />
      <van-field label="账户性质" readonly v-model="form.nature"/>
      <van-field
        v-model="form.address"
        label="办公地址"
        placeholder="请输入办公地址"
      />
      <van-field
        v-model="form.corporateName"
        label="法人或单位负责人名字"
        placeholder="请输入法人或单位负责人名字"
      />
      <van-field
        v-model="form.corporatePhone"
        label="法人或单位负责人手机号"
        placeholder="请输入法人或单位负责人手机号"
      />
      <van-field
        v-model="form.corporateCardNo"
        label="法人证件号码"
        placeholder="请输入法人证件号码"
      />
      <van-field
        v-model="form.businessLicenseNo"
        label="营业执照证件号码"
        placeholder="请输入营业执照证件号码"
      />
      <van-cell is-link title="受理网点" @click="showPickerPopup('outlets')">
        <template #default>{{outlets}}</template>
      </van-cell>
      <van-field name="radio" label="是否签约网银">
        <template #input>
          <van-radio-group v-model="form.isSign" direction="horizontal">
            <van-radio label-position="right" name="2">否</van-radio>
            <van-radio label-position="right" name="1">是</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="form.otherBankAccount"
        label="绑定在他行开立的公司账户"
        placeholder="请输入绑定在他行开立的公司账户"
      />
      <van-cell is-link title="银行名称" @click="showPickerPopup('bank')">
        <template #default>{{bankName}}</template>
      </van-cell>
      <van-cell title="推荐人工号">
        <template #default>0430170660901</template>
      </van-cell>
      <van-field name="checkbox" label="">
        <template #input>
          <van-checkbox v-model="form.isAgree" shape="square">我同意 《单位客户服务条款》</van-checkbox>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button round block type="info" @click="next">
          提交
        </van-button>
      </div>
    </van-form>
    <van-popup class="payer_account_list_popup"
               :close-on-click-overlay="false"
               v-model="showPicker"
               position="bottom"
               :style="{ height: '24%' }"
    >
      <van-picker show-toolbar value-key="name"
                  :columns="columns"
                  visible-item-count="3"
                  @change="onPayerChange"
      @confirm="onConfirm"
      @cancel="onCancel"/>
    </van-popup>
  </div>
</template>

<script>
import { RadioGroup, Radio, Checkbox } from 'vant';
import Mocks from '@/libs/mockData';

export default {
  components: {
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [Checkbox.name]: Checkbox
  },
  data() {
    return {
      form: {
        accountName: '',
        nature: '一般结算户',
        address: '',
        corporateName: '',
        corporatePhone: '',
        corporateCardNo: '',
        businessLicenseNo: '',
        acceptedOutlets: '',
        isSign: false,
        otherBankAccount: '',
        bankName: '',
        isAgree: false
      },
      outlets: '',
      bankName: '',
      showPicker: false,
      columns: [],
      checkType: ''
    };
  },
  methods: {
    showPickerPopup(val) {
      this.checkType = val;
      if (val === 'outlets') {
        this.columns = Mocks.outlets;
      } else {
        this.columns = Mocks.banks;
      }
      this.showPicker = true;
    },
    onPayerChange(picker, values) {
      console.log(picker);
      console.log(values);
    },
    onConfirm(value) {
      // console.log(value);
      this.showPicker = false;
      if (this.checkType === 'outlets') {
        this.outlets = value.name;
        this.form.acceptedOutlets = value.val;
      } else {
        this.bankName = value.name;
        this.form.bankName = value.val;
      }
    },
    onCancel(picker, values) {
      console.log(picker, values);
      this.showPicker = false;
    },
    next() {
      if (!this.form.isAgree) {
        this.$toast({ position: 'bottom', message: '需同意服务条款' });
        return;
      }
      this.$router.push('/authInformation');
    }
  }
};
</script>

<style lang="less">
.fill_account_info_page{
  height: 100%;
  .van-field__control {
    text-align: right;
  }
  .van-field__label {
    width: 12em;
    margin-right: 0.5rem;
  }
  .van-radio-group--horizontal{
    flex-direction: row-reverse;
    width: 100%;
  }
}
</style>
